<template>
	<view class="card-content">
		<view style="height: 10px;"></view>
		<view class="typeBox">

			<view class="realName">
				<view class="infoTitle">{{$t('mine.saveBank.userName')}}</view>
				<u-input shape="circle" color="white" class="input" v-model="bankCard.userName"></u-input>
			</view>

			<!-- <view class="realName">
				<view class="infoTitle">{{$t('mine.saveBank.bankCardType')}}</view>
				<u-action-sheet :actions="bankList" :show="bankShow" @close="bankShow=false"
					@select="selectClick"></u-action-sheet>
				<view class="flex justify-between" style="margin: 10px 0;" @click="bankShow=true">
					<view>{{bankCard.bankName}}</view>
					<uni-icons type="forward" size="20" color="white"></uni-icons>
				</view>
			</view> -->
			<view class="realName">
				<view class="infoTitle">{{$t('mine.bank.bankAccount')}}</view>
				<u-input type="number" shape="circle" color="white" class="input" v-model="bankCard.bankNo"></u-input>
			</view>
			<u-button shape="circle" class="sub-btn" @click="addBankCard">{{$t('common.submit')}}</u-button>
		</view>

	</view>
</template>

<script>
	import {
		addBankCard,
		updateBankCard,
		getTypeList
	} from "@/api/bankCard.js"


	export default {
		data() {
			return {
				type: 'add',
				bankCard: {
					bankName: '',
					bankNo: '',
					userName: '',
				},

				bankList: [],
				selectBank: {
					name: this.$t('mine.saveBank.selectBank')
				},
				bankShow: false,
			};
		},
		onLoad(option) {
			var item = option.item;

			if (item == '"add"') {
				uni.setNavigationBarTitle({
					title: this.$t('mine.saveBank.add')
				});
			} else {
				this.type = 'edit';
				this.bankCard = JSON.parse(item);
				uni.setNavigationBarTitle({
					title: this.$t('mine.saveBank.edit')
				});
			}

			//查询银行卡
			getTypeList().then(rsp => {
				if (rsp.code == 200) {
					this.bankList = rsp.rows;
					if (!this.bankCard.bankName) {
						this.bankCard.bankName = rsp.rows[0].name;
					}
				}
			})
		},
		methods: {
			selectClick(item) {
				this.bankCard.bankName = item.name;
				this.bankShow = false;
			},
			addBankCard() {
				//!this.bankCard.bankName ||
				if (!this.bankCard.bankNo ||
					!this.bankCard.userName) {
					uni.showToast({
						title: this.$t('mine.saveBank.cannotEmpty'),
						icon: 'error'
					})
					return;
				}
				if (this.bankCard.bankNo.length < 6) {
					uni.showToast({
						title: this.$t('mine.saveBank.cardNoFormat'),
						icon: 'error'
					})
					return;
				}
				if (this.type == 'add') {
					addBankCard(this.bankCard).then(rsp => {
						if (rsp.code == 200) {
							uni.showToast({
								title: this.$t('common.addSuccess'),
								icon: 'success'
							})
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								});
							}, 1000);

						}
					})
				} else {
					updateBankCard(this.bankCard).then(rsp => {
						if (rsp.code == 200) {
							uni.showToast({
								title: this.$t('common.modifySuccess'),
								icon: 'success'
							})
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								});
							}, 1000);

						}
					})
				}

			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $uni-color-bg;
		color: $uni-color-font;
	}

	.card-content {
		.typeBox {
			background-color: $uni-color-box;
			margin: 0 12px;
			box-shadow: 0 3px 6px 1px rgba(0, 0, 0, .12);
			border-radius: 10px;
			padding: 16px 20px 24px 20px;

			.realName {
				.infoTitle {
					color: $uni-color-subfont;
					font-size: 14px;
					font-family: PingFangSC-Regular-Regular, PingFangSC-Regular;
					font-weight: 400;
				}

				.input {
					margin-top: 10px;
					font-size: 12px;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					font-size: 16px;
					border-radius: 20px;
					opacity: 1;
					border: 1px solid $uni-color-primary !important;
					margin-bottom: 14px;
				}

			}

			.sub-btn {
				font-size: 16px;
				font-family: PingFang SC-Medium, PingFang SC;
				border: 0px;
				font-weight: 500;
				color: $uni-color-box;
				background-color: $uni-color-primary ;
			}
		}

	}
</style>